<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>


<body>

    <div id="app">
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="编号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="date"
                    label="日期"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="地址">
            </el-table-column>
            <el-table-column label="操作">
                <!--这里取当前单元行-->
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="primary"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>

        </el-table>

    </div>

    <!-- import Vue before Element -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <script>
        new Vue({
            el:"#app",
            data:{
                tableData:[
                    {id:"1",date:"2020-03-08",name:"张一一",address:"湖北十堰"},
                    {id:"2",date:"2020-03-08",name:"张二二",address:"湖北十堰"},
                    {id:"3",date:"2020-03-08",name:"张三三",address:"湖北十堰"},
                    {id:"4",date:"2020-03-08",name:"张四四",address:"湖北十堰"}
                ]
            },
            methods:{

                handleEdit:function (index,row) {
                    //此时传入的row表示此行数据对应的json对象
                    alert(index+"--"+row.id);
                },

                //方法写法等同于handleDelete：function(){}
                handleDelete(index,row){
                    alert(index+"--"+row.id);
                }

            }

        });
    </script>

</body>
</html>